<template>
  <div>
    <el-row>
      <span>当前的用户：{{ CharacterRow.username }}</span>
    </el-row>
    <el-row>
      <span>当前的角色：{{ CharacterRow.role_name }}</span>
    </el-row>
    <el-row>
      <span>分配新角色：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in userlists"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-row>
    <el-row type="flex" justify="end" style="margin-bottom: -10px; margin-top: 40px">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="btnOK">确定</el-button>
    </el-row>
  </div>
</template>

<script>
import { userDistribution } from '@/api/user'
export default {
  name: 'Character',
  components: {},
  props: {
    userlists: {
      type: Array,
      default: () => []
    },
    // eslint-disable-next-line vue/prop-name-casing
    CharacterRow: {
      type: Object,
      default: () => {}
    },
    dashboardCharacter: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      value: null
    }
  },
  computed: {}, // 计算属性
  watch: {
  },
  created() {
  },
  mounted() {},
  methods: {
    async btnOK() {
      try {
        const { data } = await userDistribution({ id: this.CharacterRow.id, rid: this.value })
        console.log(data)
        if (data.meta.status === 400) {
          this.$message.warning(data.meta.msg)
          this.$emit('update:dashboardCharacter', false)
          return false
        }
        this.$message.success('分配角色成功！')
        this.$emit('update:dashboardCharacter', false)
        this.$emit('users')
      } catch (err) {
        console.log(err)
      }
    },
    cancel() {
      this.$emit('update:dashboardCharacter', false)
    }
  }
}
</script>

<style scoped>
.el-row {
  margin: 20px 0;
  margin-top: 0;
}
</style>
